<template>
    <div class="chaxun">
        <div  id="CH" >
            <!--轮播图-->
            <div class="">
                <ul class="">
                    <li style="height: 150px">
                        <a href="javascript:;">
                            <img  style="width: 100%;height: 100%" id="banner_img" :src=chaxun_url alt=""/>
                        </a>
                    </li>
                </ul>
            </div>
            <!--主体内容-->
            <section class="seek">
                <div class="seek-box">

                    <ul id="seek-img">
                        <li class="seek-li" id="img_show" v-if="!srcs">
                            <input type="text" v-model="vin" @keyup="jdk()"   name="vin" maxlength="17" placeholder="请输入17位车架号VIN码"  style="width: 55%; font-size: 0.9375rem"/>
                            <!--图片-->
                            <div id="img" class="float_rt " style="display: flex;align-items: center;" >
                                <div class="imgbox">
                                    <form id="rt">
                                        <input type="file" id="userfile" @change="check($event)" name="imgs" class="filepath"/>
                                    </form>
                                    <img src="../assets/images/inquiry_camera_icon@2x.png" alt=""/>
                                </div>
                            </div>
                            <span class="cheName JDK float_rt" @click="JDKshow" v-if="vin" >
                    <a href="#">
                       <span class="jdk-number" style='color:#999;font-size:0.875rem'> {{vinLength}}</span>
                        <i class="xx">
                            <img src="../assets/images/inquiry_reset_icon@2x.png" alt=""/>
                        </i>
                    </a>
                </span>
                        </li>
                        <!--图片呈现给用户的图片-->
                        <li class="seek-li-img-box" v-else="srcs" style="margin-top:5px; height: 200px;border-radius: 3px">
                            <span class="close" @click="close()"><img style="width: 20px;" src="../assets/images/inquiry_reset_icon@2x.png" alt=""></span>
                            <img  width="100%" height="100%" :src=srcs alt=""/>
                        </li>


                        <li class="seek-li" @click="pinpai">
                            <input type="text" readonly name="brand_id" value="查询品牌"/>
                            <span class="cheName float_rt"  style="    height: 43px; overflow: hidden; display: inline-block;width: 50%; text-align: right">
                    <a  id="xpq" href="javascript:;">
                       <span id="chanpin_name" style="font-size: 0.9375rem">{{price?chanpiName:""}}</span>
                        <i style="margin-right:0;">
                            <img src="../assets/images/personal_collect_icon@2x.png" alt=""/>
                        </i>
                    </a>
                </span>
                        </li>
                        <!--<li class="seek-li">-->
                        <!--<input type="text" style="width: 100%"name="remark" placeholder="选填备注(如张三的车或VIN码后六位)"/>-->
                        <!--<span class="cheName float_rt">-->
                        <!---->
                        <!--</span>-->
                        <!--</li>-->
                        <li class="seek-li" id="beizhu"  style="display: none; width: 100%; ">
                            <input type="text" width="100%"  name="engine_num" placeholder="请输入发动及编号"/>
                            <span class="cheName float_rt">

                </span>
                        </li>

                    </ul>

                </div>
                <p class="cha-xiang">
                    <a class="float_rt" href="https://api.mayinvwang.com/webview/oldTuwens/?token=25bb464976d04fb3b53e7d3b07c78488#/">
                        <i>
                            <img src="../assets/images/inquiry_report_icon@2x.png" alt=""/>
                        </i>
                        查看样例报告
                    </a>
                </p>
                <!--登录按钮-->
                <div class="btn-seek" data-index="0" style="width:auto; margin: 55px 10px 0;">
                    <button @click=middle() >
                        查 询
                    </button>
                </div>
                <p class="seek-text" style='margin-bottom: 40px;'>
                    此报告包含：车型信息、事故信息、里程信息、保养信息 
                </p>

            </section>
            <!--<footer class="bottom-nav">-->
                <!--<a ><div class="foot_img foot_img_1s"><img src="../assets/images/zhanwei.png"></div></a>-->
                <!--<a href="../../report.html"> <div class="foot_img foot_img_2"><img src="../assets/images/zhanwei.png"></div></a>-->
                <!--<a href="../../user.html" > <div class="foot_img foot_img_3"><img src="../assets/images/zhanwei.png"></div></a>-->
            <!--</footer>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: 'chaxun',
        data () {
            return {
                chaxun_url:'',
                vin:"",
                remark:'',
                engine_num:'',
                //图片的地址
                srcs:'',
                //压缩图片的地址
                dataURL:"",

                vinLength:"",
                token:this.$store.state.token||sessionStorage.getItem('token'),
                user_id:this.$store.state.user_id||sessionStorage.getItem('user_id'),
                /**
                 * dw
                 :
                 "自动"
                 emissions_standards
                 :
                 "国4"
                 guidance_price
                 :
                 "23.98"
                 hint
                 :
                 "此品牌系统维护中，暂时无法查询，请稍后再试！"
                 id
                 :
                 "17"
                 is_engine
                 :
                 "0"
                 is_text
                 :
                 "0"
                 model_name
                 :
                 "CR-V"
                 model_title
                 :
                 "2.4 自动 VTi 豪华版"
                 name
                 :
                 "东风本田"
                 pl
                 :
                 "2.4"
                 query_price
                 :
                 "1"
                 status
                 :
                 "0"
                 */
                price:{},
                //展示的品牌和价格
                chanpiName:'',
                //有没有发动机
                isEngine:''
            }
        },
        watch:{
            vin:function ( a,b) {
              console.log(a,b)
                this.$store.commit('vinset',a)
                sessionStorage['vin']=a;
            }
        },
        methods:{
            jdk(){

                this.vin=this.vin.replace(/[^\w]/g,'').toUpperCase();
                var vinLength=this.vin.length;
                this.vinLength=vinLength+"/17";
                //使用vin 码来判断车型车系
                this.$http.post("https://api.mayinvwang.com/Wechat/queryByVin",
                    {
                        token: this.token,
                        user_id:this.user_id,
                        vin: this.vin
                    }).then(
                    (res)=>{
                        this.price= res.data.brand;
                        if(res.data.brand.name&&res.data.brand.query_price){

                            this.chanpiName=res.data.brand.name+ "(" + res.data.brand.query_price+ "元)";
                            this.isEngine=res.data.brand.is_engine;
                        }else {
                            this.chanpiName=''
                        }
                        console.log(res);
                    }
                )
            },
            JDKshow(){
                this.vin=""
            },
            pinpai(){
                this.$router.push({ path: '/pinpai' })
                window.location.reload();
            },
            check(e) {
                console.log(e)
                //当图片加载时 1、清楚Vin 2、把图片变成bes64data格式并压缩
                this.vin = "";
                var aa = document.getElementById("userfile").value.toLowerCase().split('.');//以“.”分隔上传文件字符串
                console.log(document.getElementById("userfile").value);
                if (aa[aa.length - 1] == 'gif' || aa[aa.length - 1] == 'jpg' || aa[aa.length - 1] == 'bmp'
                    || aa[aa.length - 1] == 'png' || aa[aa.length - 1] == 'jpeg')//判断图片格式
                {
                    var srcs = this.getObjectURL(e.currentTarget.files[0]);
                    console.log(srcs);
                    this.srcs = srcs;
//                    sessionStorage["srcs"]=this.srcs;
                    /****
                     * 图片压缩
                     * @param e
                     */
                    var file = e.currentTarget.files[0];
                    var reader = new FileReader();
                    reader.onloadend = function () {
                        //  图片的 base64 格式, 可以直接当成 img 的 src 属性值
                        // var dataURL = reader.result;
                        //压缩图片
                        var img = new Image();
                        img.onload = function () {
                            // 当图片宽度超过 400px 时, 就压缩成 400px, 高度按比例计算
                            // 压缩质量可以根据实际情况调整
                            var w = Math.min(400, img.width);
                            var h = img.height * (w / img.width);
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');

                            // 设置 canvas 的宽度和高度
                            canvas.width = w;
                            canvas.height = h;

                            // 把图片绘制到 canvas 中
                            ctx.drawImage(img, 0, 0, w, h);

                            // 取出 base64 格式数据
                            var dataURL = canvas.toDataURL('image/png');
                            sessionStorage['dataURL'] = dataURL;
                        };

                        img.src = reader.result;
                    };
                    reader.readAsDataURL(file); // 读出 base64
                    /***
                     * 图片压缩结束
                     */
                }else{
                    this.$layer.msg('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片');//jpg和jpeg格式是一样的只是系统Windows认jpg，Mac OS认jpeg，
                    return false;
                }



            },
            getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) {
                    url = window.createObjectURL(file)
                } else if (window.URL != undefined) {
                    url = window.URL.createObjectURL(file)
                } else if (window.webkitURL != undefined) {
                    url = window.webkitURL.createObjectURL(file)
                }
                return url
             },
            close(){
                this.srcs="";
                sessionStorage.removeItem('dataURL')
            },
            //中间页的返回的数据
            middle(){
                console.log(this.dataURL)
                if(sessionStorage['dataURL']){
                    console.log('图片传shu');
                    console.log(this.price);
                    if(!this.chanpiName){
                        return this.$layer.msg('请选择品牌')
                    }else{
                        this.$http.post('http://api.mayinvwang.com/index.php/Appjson/middle',
                            {
                                img: sessionStorage['dataURL'],
                                user_id:this.$store.state.user_id||sessionStorage['user_id'] ,
                                brand_id:this.price.id,
                                brand_price:this.price.query_price,
                                is_text:0
                            }).then(
                            (res)=>{
                                console.log(res.data)
                                this.$router.push({name:'buy',params:res.data.data})
                            },(res)=>{
                                console.log(res.data)
                            }
                        )
                    }

                }else{
                    if(!this.vin){
                        return this.$layer.msg('请填写VIN码')
                    }else if(this.vin.length<17){
                        return this.$layer.msg('请填写17位VIN码')
                    }
                    alert(this.chanpiName)
                    if(!this.chanpiName){
                        this.$layer.msg('请选择品牌')
                        return
                    }else{
                        this.$http.post('http://api.mayinvwang.com/index.php/Appjson/middle',
                            {
//                            img: sessionStorage['dataURL'],
                                vin:this.vin,
                                user_id:this.$store.state.user_id||sessionStorage['user_id'] ,
                                brand_id:this.price.id,
                                brand_price:this.price.query_price,
                                is_text:0
                            }).then(
                            (res)=>{
                                this.$router.push({name:'buy',params:res.data.data})
                                console.log(res.data)
                            },(res)=>{
                                console.log(res.data)
                            }
                        );
                    }


                }
            }

        },
        created:function(){
//            this.srcs=sessionStorage["srcs"];
            this.srcs=sessionStorage['dataURL']
            if(sessionStorage['vin']){
                this.vin=this.$store.state.Vin||sessionStorage['vin'];
                var vinLength=this.vin.length;
                this.vinLength=vinLength+"/17";
            }
            if(!this.$route.query.name){
                this.chanpiName=''
            }else{
                    this.price=this.$route.query;
                this.chanpiName=this.$route.query.name+"("+this.$route.query.query_price+"元)";
            }
            this.$http.get('https://api.mayinvwang.com/index.php/AppjsonPublic/chaxun_banner_images').then(
                (res)=>{
                    console.log(res);
                    this.chaxun_url=res.data.chaxun_url;
                }
            )
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    body{

        height:100% !important;
        min-height: 500px;
        position: relative;
        background: #ffffff;
    }
    .chaxun{
        height:100%;
    }
    .filepath{
        overflow: hidden;
        height: 22px;
        right: 18px;
        width: 5% !important;
    }
    @import "../assets/css/user.css";
    #img{
        border-left: 1px solid #D3D3D3;
        padding-left: 10px;
        height: 100%;
    }
    .imgbox{
        display: inline-block;
        width: 27px;
        height: 22px;
        vertical-align: sub;

    }
    #img input{
        position: absolute;
        opacity: 0;
        width: 100%;

    }
    .seek-li-img-box{
        position: relative;
        padding: 0;
        min-height: 20px;
        /*height: 150px;*/
        border-radius: 3px;
        margin-top: 10px;
        display: inline-block;
        border: 1px solid #ccc;
        width: 100%;
    }
    .close {
        color: red;
        position: absolute;
        right: 7px;
        top: 4px;
        /*display: none;*/
    }
</style>
